<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>examinationING</title>
  <script type="text/javascript" src="js/getRequest.js"></script>
  <script type="text/javascript">
  var isIE8 = myBrowser();
  if (isIE8) {
    document.write("<link href='css/bootstrap-common.min.css' rel='stylesheet'>"); 
  } else {
    document.write("<link href='"+ onlineURL +"plugins/bootstrap/css/bootstrap.min.css?v=170418' rel='stylesheet' media='screen'>"); 
  }
  </script>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
  <![endif]-->
  <script type="text/javascript">
    document.write("<script src='"+ onlineURL +"plugins/jquery.min.js?v=170418'><\/script>"); 
  </script>
  <script type="text/javascript">
    document.write("<script src='"+ onlineURL +"plugins/echarts/echarts.min.js?v=170418'><\/script>"); 
  </script>
</head>
<body>
<div class="container-fluid">
  <h3>进行中考试情况</h3>
  <div id="examination" class="content">
    <div class="top">
      <h4 class="examine">选择考试批次</h4>
      <ul id="batch_id" class="item-parent"></ul>
    </div>

    <div class="bottom">
      <h4>数据统计</h4>
      <div id="table"></div>
    </div>
  </div>
</div>

<script id="itemSystemIds" type="text/html">
  {{each pagelist as value i}}
  <li class="text-center inline-item" data-id="{{value}}"><a href="#close">{{value}}考试批次</a></li>
  {{/each}}
</script>

<script id="myTable" type="text/html">
<table class="table table-bordered table-condensed text-center">
  <tbody>
    <tr class="text-center">
      <th class="text-center">函授站</th>
      <th class="text-center">应考人数</th>
      <th class="text-center">实考人数</th>
    </tr>
    {{each pagelist as value i}}
    <tr class="text-center">
      <td class="text-center">{{value[1]}}</td>
      <td class="text-center">{{value[2]}}</td>
      <td class="text-center">{{value[3]}}</td>
    </tr>
    {{/each}}
    </tbody>
  </table>
</script>

<script type="text/javascript" src="js/template.js"></script>

<script type="text/javascript">
$(function() {

  var tableHtml = '',
      parameters = getParameters(),
      thisUrl = getSite(),
      itemSystem = {itemSystemIds:'2c9091fd58f622680158f62270fe0008'},
      WithoutitemSystem = WithoutitemSystemIds(),
      sumData = Object.assign(itemSystem,WithoutitemSystem);
  
  $.ajax({
    type: 'POST',
    url: thisUrl,
    data: sumData,
    dataType: 'json',
    success: function(data) {
      var batchHtml = template('itemSystemIds',data);
      $('#batch_id').html(batchHtml);

      // 设置默认显示条目
      var defaultShowItem = $('#batch_id li').eq(0),
          defaultItems = get_dataset(defaultShowItem[0]).id,
          oDefault = {batchname: defaultItems},
          defaultData = Object.assign(oDefault,parameters);

      defaultShowItem.addClass('active');

      $.ajax({
        type: 'POST',
        url: thisUrl,
        data: defaultData,
        dataType: 'json',
        success: function(data){
          getTable(data);
        }
      })
    },
    error: function(data) {
    	  document.write(data.responseText);
      }
  });

  // 事件委托添加点击事件
  var arrTemp = [];
  $('#batch_id').on('click', 'li', function(e) {
    // 单选：添加选中样式
    $('#batch_id li').eq(0).removeClass('active');

    var addIndex = $(this).index(),
        delIndex = arrTemp.shift();

    $('#batch_id li').eq(delIndex).removeClass('active');
    $(this).addClass('active');
    arrTemp.push(addIndex);

    // 选择数据
    var selectedItems = get_dataset(this).id,
        oSelected = {batchname: selectedItems},
        selectedData = Object.assign(oSelected,parameters);

    $.ajax({
      type: 'POST',
      url: thisUrl,
      data: selectedData,
      dataType: 'json',
      success: function(data){
        getTable(data);
      }
    })
  })
});

function getTable(data) {
  var tableHtml = template('myTable', data);
  $('#table').html(tableHtml);
  $('tr th').css('width','33%');
};  

</script>

